<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
        #theirs {
            position: absolute;
            top: 100px;
            left: 100px;
            width: 500px;
        }

        #yours {
            position: absolute;
            top: 120px;
            left: 480px;
            width: 300px;
            z-index: 9999;
            border: 1px solid #ddd;
        }
    </style>
</head>

<body>
    <video id="yours" autoplay controls></video>
    <video id="theirs" autoplay controls></video>
    <button onclick="stop()">关闭</button>
</body>
<!-- <script type="text/javascript" src="./main.js"></script> -->
<script>
    // 这不是webrtc
    function hasUserMedia() {
        navigator.getUserMedia = navigator.getUserMedia || navigator.msGetUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        return !!navigator.getUserMedia;
    }
    var yourVideo = document.getElementById("yours");
    var theirVideo = document.getElementById("theirs");
    var yourConnection, theirConnection;
    let mediaStreamTrack = null
    let constraints = {
        audio: true,
        video: {
            width: { ideal: 1280 },
            height: { ideal: 720 }
        }
    }

    async function blobStream() {
        let mediaStream = await navigator.mediaDevices.getUserMedia(constraints)
        var video = document.querySelector('#yours');
        console.log(mediaStream);
        window.stream = mediaStream
        // let url = URL.createObjectURL(mediaStream)
        video.srcObject = mediaStream;
        // video.src = url
        console.log(mediaStream.getTracks());
        mediaStreamTrack = mediaStream
        video.onloadedmetadata = function (e) {
            video.play();
        };
        let mediaRecorder = new MediaRecorder(mediaStream);
        mediaRecorder.ondataavailable = function (blob) {
            console.log(1);
            // console.log(blob)
            // console.log("处理之前", blob.data)
            let url = URL.createObjectURL(blob.data)

            // console.log("处理之后", url)
            // setTimeout(() => {
            // 	URL.revokeObjectURL(url)
            // }, 1000);
            theirVideo.src = url
            // theirVideo.play()
            // var reader = new FileReader();
            // reader.readAsDataURL(blob.data);
            // reader.onload=function(e){
            // 	console.log("aaaaa", e);
            // 	theirVideo.src = e.target.result
            // }
        }
        console.log(mediaRecorder);
        mediaRecorder.start(3000)
    }

    if (hasUserMedia()) {
        blobStream()
        // navigator.mediaDevices.getUserMedia(constraints)
        //     .then(function (mediaStream) {
        //         var video = document.querySelector('#yours');
        //         console.log(mediaStream);
        //         window.stream = mediaStream
        //         // let url = URL.createObjectURL(mediaStream)
        //         video.srcObject = mediaStream;
        //         // video.src = url
        //         console.log(mediaStream.getTracks());
        //         mediaStreamTrack = mediaStream
        //         video.onloadedmetadata = function (e) {
        //             video.play();
        //         };
        //         let mediaRecorder =new MediaRecorder(mediaStream);
        //         mediaRecorder.ondataavailable = function (blob) {
        //             console.log(blob)
        //             console.log(blob.data)
        //         }
        //         mediaRecorder.start(1000)
        //     })
        //     .catch(function (err) { console.log(err.name + ": " + err.message); }); // 总是在最后检查错误
    } else {
        alert("没有userMedia API")
    }
    function stop() {
        mediaStreamTrack.getTracks().forEach(track => {
            track.stop();
        });
    }
</script>

</html>
<script>
    // function async videoStream(){
    //     let localStream=await navigator.mediaDevices.getUserMedia({video:true})
    //     let video=document.querySelector('video')
    //     video.srcObject=localStream
    //     video.onloadedmetadata=function(e){video.play()}
    //     let mediaRecorder=new MediaRecorder(localStream);
    //     mediaRecorder.ondataavailable=function(blob){
    //         console.log(blob.data)
    //     }
    //     mediaRecorder.start(1000)
    // }
    // 找到方法了，getUserMedia返回的stream需要用MediaRecorder包装一下。监听ondataavailable事件，然后执行start方法。这样就可以根据固定的时间间隔取得视频流了。
</script>
